"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Modal, TextInput, Pressable, Platform } from "react-native"
import { theme } from "../../constants/theme"

interface AddCollectionModalProps {
    visible: boolean
    onClose: () => void
    onConfirm: (name: string) => void
}

export function AddCollectionModal({ visible, onClose, onConfirm }: AddCollectionModalProps) {
    const [collectionName, setCollectionName] = useState("")

    const handleConfirm = () => {
        if (collectionName.trim()) {
            onConfirm(collectionName.trim())
            setCollectionName("") // Reset input
        }
    }

    const handleCancel = () => {
        setCollectionName("") // Reset input
        onClose()
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={handleCancel}>
            <View style={styles.overlay}>
                <Pressable style={styles.backdrop} onPress={handleCancel} />
                <View style={styles.modalContainer}>
                    <Text style={styles.modalTitle}>创建收藏本</Text>

                    <TextInput
                        style={styles.input}
                        placeholder="请输入收藏本名称"
                        placeholderTextColor={theme.colors.neutral.gray}
                        value={collectionName}
                        onChangeText={setCollectionName}
                        autoFocus
                        maxLength={20}
                    />

                    <View style={styles.buttonContainer}>
                        <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={handleCancel}>
                            <Text style={styles.cancelButtonText}>取消</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.button, styles.confirmButton, !collectionName.trim() && styles.disabledButton]}
                            onPress={handleConfirm}
                            disabled={!collectionName.trim()}
                        >
                            <Text style={styles.confirmButtonText}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    modalContainer: {
        width: "80%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.xl,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    modalTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.lg,
        textAlign: "center",
    },
    input: {
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.md,
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.xl,
    },
    buttonContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        gap: theme.spacing.md,
    },
    button: {
        flex: 1,
        paddingVertical: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        alignItems: "center",
        justifyContent: "center",
    },
    cancelButton: {
        backgroundColor: theme.colors.neutral.lightGray,
    },
    confirmButton: {
        backgroundColor: theme.colors.primary.default,
    },
    disabledButton: {
        backgroundColor: theme.colors.neutral.gray,
        opacity: 0.5,
    },
    cancelButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    confirmButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },
})

